<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app" style="overflow: hidden;">
	<!-- 添加公告 -->
	<el-dialog :visible.sync="visible1" title="添加公告" width="30%">
	  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
	    <el-form-item label="标题" prop="title">
	      <el-input v-model="ruleForm.title"></el-input>
	    </el-form-item>
		<el-form-item label="内容" prop="content">
		  <el-input v-model="ruleForm.content"></el-input>
		</el-form-item>
		<el-form-item>
		  <el-button type="primary" @click="addForm('ruleForm')">立即创建</el-button>
		  <el-button @click="resetForm('ruleForm')">重置</el-button>
		</el-form-item>
	  </el-form>
	</el-dialog>
	
	<!-- 编辑公告 -->
	<el-dialog :visible.sync="visible2" title="编辑公告" width="30%">
	  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
	    <el-form-item label="ID" prop="id">
	      <el-input v-model="ruleForm.id" readOnly></el-input>
	    </el-form-item>
		<el-form-item label="标题" prop="title">
		  <el-input v-model="ruleForm.title"></el-input>
		</el-form-item>
		<el-form-item label="内容" prop="content">
		  <el-input v-model="ruleForm.content"></el-input>
		</el-form-item>
	   <el-form-item>
	     <el-button type="primary" @click="editForm('ruleForm')">立即编辑</el-button>
	   </el-form-item>
	  </el-form>
	</el-dialog>
	
	<div style="margin-top: 60px;margin-left:80px;border: 0px solid red;" >
			<el-form :model="searchRuleForm" ref="searchRuleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item prop="title" label="标题：" style="margin-left: -45px;">
					<el-input v-model="searchRuleForm.title" placeholder="请输入标题" style="width: 230px;float: left"></el-input>
					<el-button type="primary" icon="el-icon-search" style="float: left;position: relative;left: 20px;" @click="submitForm()">搜索</el-button>
					<el-button type="warning" icon="el-icon-refresh-right" style="position: relative;left: 22px;" @click="resetForm('searchRuleForm')">重置</el-button>
					<el-button type="success" icon="el-icon-folder-add" style="position: relative;left: 20px;" @click="add()">添加</el-button>
				</el-form-item>
			</el-form>
			<el-table
				:data="tableData"
				border
				stripe
				style="width: 100%;">
			<el-table-column
					fixed
					prop="id"
					label="ID"
					width="100">
			</el-table-column>
			<el-table-column
					prop="title"
					label="标题"
					width="260">
			</el-table-column>
			<el-table-column
					prop="content"
					label="内容"
					width="260">
			</el-table-column>
			<el-table-column
					prop="opername"
					label="操作人"
					width="160">
			</el-table-column>
			<el-table-column
					prop="createtime"
					label="创建时间"
					width="230">
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button
							size="mini"
							type="primary"
							icon="el-icon-edit"
							@click="edit(scope.row)">编辑</el-button>
					<el-button
							size="mini"
							type="danger"
							icon="el-icon-delete"
							@click="del(scope.row)">删除</el-button>
				</template>
			</el-table-column>
			</el-table>
			<el-pagination style="margin-top: 20px;float: right;"
						   background
						   layout="prev, pager, next"
						   :page-size="pageSize"
						   :total="total"
						   :current-page.sync="currentPage"
						   @current-change="page">
			</el-pagination>
	</div>
</div>
</body>
<script src="js/vue.js"></script>
<script src="js/elementui.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
  new Vue({
	el: '#app',
	data() {
		return {
			tableData:null,
			pageSize:5,
			total:null,
			currentPage:1,
			searchRuleForm: {
			  title:''
			},
			ruleForm: {
			  id:'',
			  title:'',
			  content:''
			},
			rules: {
			  title: [{required: true, message: '请输入标题', trigger: 'blur'}],
			  content: [{required: true, message: '请输入内容', trigger: 'blur'}]
			},
			visible1:false,
			visible2:false
		}
	},
	methods:{
		add(){
			this.visible1 = true
		},
		addForm(formName) {
			this.$refs[formName].validate((valid) => {
			  if (valid) {
				let _this = this
				axios.post('http://localhost:8181/news/add',_this.ruleForm).then(function (response) {
					if(response.data.code == 0){
						_this.$alert('公告【'+_this.ruleForm.title+'】添加成功', '', {
							confirmButtonText: '确定',
							callback: action => {
								location.reload()
							}
						});
					} else {
						_this.$alert(response.data.msg, '提示', {
							confirmButtonText: '确定'
						});
					}
				})
			  } else {
				console.log('error submit!!');
				return false;
			  }
			});
		  },
		resetForm(formName) {
		  this.$refs[formName].resetFields();
		},
		submitForm() {
			const _this = this
			//让翻页复原
			_this.currentPage=1
			axios.get('http://localhost:8181/news/load?title='+_this.searchRuleForm.title+'&page='+_this.currentPage+'&limit='+_this.pageSize).then(function (resp) {
				_this.tableData = resp.data.data
				_this.total = resp.data.count
			})
		},
		page(currentPage){
			const _this = this
			axios.get('http://localhost:8181/news/load?title='+_this.searchRuleForm.title+'&page='+currentPage+'&limit='+_this.pageSize).then(function (resp) {
				_this.tableData = resp.data.data
				_this.total = resp.data.count
			})
		},
		edit(row){
			this.visible2 = true
			this.ruleForm.id = row.id
			this.ruleForm.title = row.title
			this.ruleForm.content = row.content
		},
		editForm(formName) {
			this.$refs[formName].validate((valid) => {
			  if (valid) {
				let _this = this
				axios.post('http://localhost:8181/news/update',_this.ruleForm).then(function (response) {
					if(response.data.code == 0){
						_this.$alert('公告【'+_this.ruleForm.title+'】编辑成功', '', {
							confirmButtonText: '确定',
							callback: action => {
								location.reload()
							}
						});
					} else {
						_this.$alert(response.data.msg, '提示', {
							confirmButtonText: '确定'
						});
					}
				})
			  } else {
				console.log('error submit!!');
				return false;
			  }
			});
		  },
		del(row) {
			const _this = this
			this.$confirm('确认删除【'+row.title+'】吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				axios.delete('http://localhost:8181/news/delete?id='+row.id).then(function (resp) {
					if(resp.data.code==0){
						_this.$alert('【'+row.title+'】已删除', '', {
							confirmButtonText: '确定',
							callback: action => {
								location.reload()
							}
						});
					}
				});
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		}
	},
	created() {
		const _this = this
		axios.get('http://localhost:8181/news/load').then(function (resp) {
			_this.tableData = resp.data.data
			_this.total = resp.data.count
		})
	}
  })
</script>
	
<style>
    .home_container {
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
    }

    .el-header {
        background-color: #20a0ff;
        color: #333;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .el-aside {
        background-color: #ECECEC;
    }

    .el-main {
        background-color: #fff;
        color: #000;
        text-align: center;
    }

    .el-footer {
        background-color: #ea7e53;
        color: #fff;
        font-size: 22px;
        line-height: 60px;
		text-align: center;
    }

    .home_title {
        color: #fff;
        font-size: 22px;
        display: inline;
    }

    .home_userinfo {
        color: #fff;
        cursor: pointer;
    }

    .home_userinfoContainer {
        display: inline;
        margin-right: 20px;
    }
</style>
</html>
